<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/msg.css" rel="stylesheet" />
		<style>
			.message-list-icon {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
	           <script src="../../js/mui.min.js"></script>
        <script src="../../js/tools.js"></script>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">春节</h1>
		</header>
		<div class="mui-content">
		    <ul class="mui-table-view" id="messageList">
				<li class="mui-table-view-cell">
					<p class="msg-section message-list-p">
						喜气洋洋小金莲喜气洋洋小金莲喜气洋洋小金莲喜气洋洋小金莲喜气洋洋小金莲喜气洋洋小金莲。
					</p>
					<div class="msg-font-size mui-text-right">
						<span class="msg-icon inner-heart msg-icon-active" id="collect">
							<i class="fa fa-heart message-list-icon"><span>(24)</span></i>
						</span>
						<!--<span class="msg-icon inner-heart msg-icon-active" id="collect">
							<i class="fa fa-heart-o message-list-icon"><span>(24)</span></i>
						</span>-->
						&nbsp;
						<span class="msg-icon inner-share" id="share">
							<i class="fa fa-share-square-o message-list-icon"><span>(52)</span></i>
						</span>
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			mui.init();
			var messages = [];
			var messageList;
			window.onload = function(){
			  	mui.plusReady(function(){
			  		for (var i = 0; i < 10; i++) {
			  			messages[i] = {
			  				id: i,
			  				content: '测试数据' + i,
			  				collectNum: 12,
			  				shareNum: 10,
			  				author: 'kwchen',
			  				isCollect: (i%2 == 0 ? true : false)
			  			}
			  		}
			  		
			  		messageList = document.getElementById('messageList');
			  		
			  		//循环遍历程序
			  		for (var i = 0; i < messages.length; i++) {
				  		messageList.appendChild(createFragment(messages[i]));
			  		}
			  		
			  		/**
			  		 * 收藏
			  		 */
			  		mui('.mui-table-view-cell').on('tap','.inner-heart',function() {
			  			var classNameValue = this.className;
			  			var id = this.id.substr(this.id.indexOf('_') + 1);
			  			var collectNum = this.firstChild.firstChild.innerHTML ? parseInt(this.firstChild.firstChild.innerHTML) : 0;
			  			if(classNameValue.indexOf('msg-icon-active') != -1) {
			  				this.className = "msg-icon inner-heart";
			  				this.firstChild.className = "fa fa-heart-o message-list-icon";
			  				collectNum -= 1;
			  			} else {
			  				this.className = "msg-icon inner-heart msg-icon-active";
			  				this.firstChild.className = "fa fa-heart message-list-icon";
			  				collectNum += 1;
			  			}
			  			this.firstChild.firstChild.innerHTML = collectNum;
			  			
			  			// TODO 访问接口
			  			console.log("改变id为" + id + "的值为" + collectNum);
			  		})
			  		
			  		/**
			  		 * 分享
			  		 */
			  		mui('.mui-table-view-cell').on('tap','.inner-share',function() {
			  			var collectNum = this.firstChild.firstChild.innerHTML ? parseInt(this.firstChild.firstChild.innerHTML) : 0;
			  			var spanId = this.id.substr(this.id.indexOf('_') + 1);
			  			var pId = 'p_' + spanId
			  			var p = document.getElementById(pId);
			  			var content = p ? p.innerHTML : "";
			  			//调用原生actionsheet
			  			var btnArray = [{title:"短信", color:"#007AFF"},{title:"微信", color:"#007AFF"},,{title:"复制内容", color:"#007AFF"}];
			  			plus.nativeUI.actionSheet({
							title:"分享到",
							cancel:"取消",
							buttons:btnArray
						}, function(e){
							var index = e.index;
							switch (index){
							case 1:
								console.log('分享内容'+content+'到短信');
								// TODO 调用短信接口
								sendMsgTool(content, null);
								break;
							case 2:
								// TODO 分享才开始。。。。
								console.log('分享内容'+ content + '到微信');
								plus.share.getServices(function(s){
								    console.log(JSON.stringify(s));
								}, function(e) {
								    console.log(e);
								});
								break;
							case 3:
                                console.log('复制'+ content);
                                break;
							}
						});
			  		})
			  		//关闭等待框
				    plus.nativeUI.closeWaiting();
				    //显示当前页面
				    mui.currentWebview.show('slide-in-right', 300);
			  	});
			  	
			  	
			  	
			  	/**
			  	 * 创建标签元素
			  	 * @param {Object} data
			  	 */
			  	function createFragment(data) {
                        var flag = document.createDocumentFragment();
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        
                        var p = document.createElement('p');
                        p.className = 'msg-section message-list-p';
                        p.id = "p_"+data.id;
                        p.innerHTML = data.content;
                        li.appendChild(p);
                        
                        var div = document.createElement('div');
                        div.className = 'msg-font-size mui-text-right';
                        
                        var spanCollect = document.createElement('span');
                        spanCollectId = 'collect_' + data.id; 
                        spanCollect.innerHTML = 
                                data.isCollect ? 
                                '<span class="msg-icon inner-heart msg-icon-active" id="'+spanCollectId+'">'+
                                    '<i class="fa fa-heart message-list-icon"><span>'+data.collectNum+'</span></i>' +
                                '</span>'
                                : 
                                '<span class="msg-icon inner-heart" id="'+spanCollectId+'">'+
                                    '<i class="fa fa-heart-o message-list-icon"><span>'+data.collectNum+'</span></i>'+
                                '</span>';
                        div.appendChild(spanCollect);
                        
                        var spanShare = document.createElement('span');
                        spanShareId = 'share_' + data.id; 
                        spanShare.innerHTML = 
                                '&nbsp;&nbsp;<span class="msg-icon inner-share" id="'+spanShareId+'">'+
                                    '<i class="fa fa-share-square-o message-list-icon"><span>'+data.shareNum+'</span></i>'+
                                '</span>';
                        div.appendChild(spanShare);
                        li.appendChild(div);
                        flag.appendChild(li);
                        return flag;
                    }
			}
		</script>
	</body>

</html>